<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="编辑" width="40%">
    <el-card class="box-card">
      <!-- <div slot="header">
        <span class="bold">基本信息</span>
      </div> -->

      <el-row>
        <el-col :span="24">
          <div class="watch required">
            计费码金额：
            <el-input
              v-model="price"
              disabled
              size="mini"
              style="width:200px"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="watch required">
            计费码名称：
            <el-input
              v-model="billingCodeName"
              size="mini"
              style="width:200px"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="watch required">
            计费码标识：
            <el-input
              v-model="billingCode"
              size="mini"
              style="width:200px"
            />
          </div>
        </el-col>
      </el-row>

    </el-card>
    <div class="btnall">
      <el-button
        type="primary"
        round
        size="mini"
        style="width:100px"
        @click="save"
      >保存</el-button>
      <el-button
        type="primary"
        plain
        round
        size="mini"
        style="width:100px"
        @click="check"
      >取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { nameOrHas, orHave, paySave } from '@/api/payChannel.js'
import { plusNum, numAndWord } from '@/utils/validate.js'
export default {
  name: 'Watch',
  props: {
    editDialog: {
      type: Boolean,
      default: false
    },
    channelId: {
      type: String,
      default: '0'
    },
    realObj: {
      type: Object,
      default: () => {}
    }
    /* watchId: {
      type: Number,
      default: 0
    } */
  },
  data() {
    return {
      showPointDialog: false, // 遮罩
      name: '', // 名字
      channelIds: '',
      price: '', // 价格
      billingCodeName: '',
      billingCode: '',
      mode: '', // 计费方式,
      cycle: '', // 计费周期
      id: '', // id
      payStyles: [],
      lockPeriod: '',
      isGoon: 1, // 是否自动续订
      billingChannelList: []
    }
  },
  watch: {
    editDialog(newVal) {
      console.log(this.realObj)
      this.price = this.realObj.price
      this.billingCodeName = this.realObj.billingCodeName
      this.billingCode = this.realObj.billingCode
      this.showPointDialog = newVal
      this.channelIds = this.channelId
      // this.loadSelect()
      // this.loadDetail(this.watchId)
    }
  },
  methods: {
    // 回调父组件
    check(val) {
      this.showPointDialog = false
      this.$emit('closeEdit', val)
      this.price = ''
      this.billingCodeName = ''
      this.billingCode = ''
      this.billingChannelId = ''
    },
    save() {
      var data = {
        price: this.price, // 价格
        billingCodeName: this.billingCodeName,
        billingCode: this.billingCode,
        billingChannelId: this.channelIds,
        id: this.realObj.id
      }
      if (!this.price) {
        this.$message({
          type: 'error',
          message: '请输入价格'
        })
        return false
      }
      if (!plusNum(this.price)) {
        this.$message({
          type: 'error',
          message: '金额为大于等于0的数'
        })
        return false
      }
      if (!this.billingCodeName) {
        this.$message({
          type: 'error',
          message: '请输入计费码名称'
        })
        return false
      }
      if (!this.billingCode) {
        this.$message({
          type: 'error',
          message: '请输入计费码标识'
        })
        return false
      }
      if (!numAndWord(this.billingCode)) {
        this.$message({
          type: 'error',
          message: '计费码标识只可填写数字、字母或数字字母的组合'
        })
        return false
      }
      nameOrHas({
        billingCodeName: this.billingCodeName,
        id: this.realObj.id,
        billingChannelId: this.channelIds
      }).then(res => {
        if (res.resultCode === '0000') {
          orHave({
            billingCode: this.billingCode,
            id: this.realObj.id,
            billingChannelId: this.channelIds
          }).then(val => {
            if (val.resultCode === '0000') {
              paySave(data).then(result => {
                if (result.resultCode === '0000') {
                  this.$message({
                    type: 'success',
                    message: '保存成功'
                  })
                  this.check(true)
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.watch{
  margin: 10px 0;
}
.btnall{
  margin: 17px auto -12px auto;
  width: 230px;
}
.required::before{
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
</style>
